<template>
	<div class="category">
		<h3>图书分类</h3>
		<div v-for="category in categories" :key="category.id">
			<h5>{{category.name}}</h5>
			<router-link v-for="child in category.children" :key="child.id" :to="'/category/'+child.id">
				{{child.name}}
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name:'HomeCategory',
		data(){
			return{
				categories:[]
			}
		},
		created(){
			// 发请求获取分类数据
			this.axios.get('/category').then(response=>{
				if(response.status == 200){
					this.categories = response.data
				}
			}).catch(error=> console.log(error))
		}
	}
</script>

<style scoped>
.category {
  margin-left: 60px;
  margin-top: 10px;
  float: left;

  border: solid 1px #ccc;
  width: 15%;
}
.category div {
  margin-bottom: 10px;
}
.category a {
  padding: 0 5px 0 5px;
}
</style>